<template>
  <div class="chatInfo__card">
    <div class="chatInfo__body">
      <div class="richLink__content">
        <span class="richLink__content-title">{{ renderTitle() }}</span>
        <div class="richLink__content-detail">
          {{ renderDetail() }}
        </div>
      </div>
      <img :src="message.messageInfo.body.linkImg" alt="" />
    </div>
  </div>
</template>

<script>
import classnames from 'classnames';
export default {
  props: ['message', 'belong'],
  computed:{
    renderCls() {
      return classnames({
        system: true
      });
    }
  },
  methods: {
    renderTitle() {
      return this.message.messageInfo.body.linkTitle;
    },
    renderDetail() {
      return this.message.messageInfo.body.linkDetail;
    },
    renderBody() {
      return this.message.messageInfo.body.linkDetail;
    }
  }
};
</script>
<style lang="scss" scoped>
.system {
  font-size: 12px;
  white-space: pre-line;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

.chatInfo__card {
  background: white;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ebebeb;
}

.chatInfo__body {
  width: 100%;
  height: 110px;
  display: flex;
  box-sizing: border-box;
  .richLink__content {
    flex: 1;
    height: 80px;
    overflow: hidden;
    .richLink__content-title {
      color: inherit;
      font-size: 18px;
      line-height: 40px;
      font-weight: 600;
    }
    .richLink__content-detail {
      color: inherit;
      font-size: 13px;
    }
  }
  img {
    width: 54px;
    height: 54px;
    margin-top: 40px;
    margin-left: 10px;
  }
}
</style>
